<template>
    <el-row>
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="625px" :before-close="handleClose" @close="handleClose()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{ title }}</span>
                </div>
                <div class="user-list radio" v-if="cousList.length != 0">
                    <el-checkbox-group v-model="form.radio">
                        <el-checkbox :label="item.id" v-for="(item, i) in cousList" :key="i" @change="clk" >
                            <div class="list box box-align-center mt20">
                                <div class="item box box-align-center box-pack-between">
                                    <div class="box box-pack-start box-align-center ml20">
                                        <el-image :src="item.image" class="img"></el-image>
                                        <div class="box box-tb box-pack-start box-align-start ml20">
                                            <h3 style="width: 200px;overflow: hidden;text-align: left;">{{ item.name }}</h3>
                                            <span class="mt10 mb10">共{{ item.cnt }}章</span>
                                            <span>主编： {{ item.chiefEditor }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-checkbox>
                    </el-checkbox-group>
                    <el-pagination @current-change="handleCurrentChange" :current-page="ipagination.current"
                        ayout="prev, pager, next" :total="ipagination.total" hide-on-single-page>
                    </el-pagination>
                </div>
                <div v-else>
                    <el-empty description="暂无数据" :image-size="100"></el-empty>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onSubmit()" :disabled="disabledbtn == false">确 定</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
import {
    getActionV3
} from '@/http/axios.js'
export default {
    props: {
        dialogVisible: {
            default: false
        },
        testdata: {
            default: []
        },
        title: {
            default: '添加课程任务'
        },
    },
    data() {
        return {
            cousList: [],
            checkedItems: [],
            loginInfo: this.$store.state.loginInfo,
            form: {
                radio: []
            },
            disabledbtn: false,
            schoolid: this.$store.state.schoolId,
            ipagination: {
                total: 0,
                rows: 8,
                page: 1,
                current: 1
            },
            url: {
                list: '/cous/public/fast'
            },
        };
    },
    mounted() {
        console.log(this.testdata, 'aaaaaaaaaaaasd')
    },
    methods: {
        // getCourseList() {
        //     this.form.radio = '';
        //     let params = {
        //         schoolid: this.schoolid
        //     };
        //     this.$ajax.post('/ycous/clist',params).then(res => {
        //         if (res.code == '0') {
        //             this.ldkcList = res.list
        //             console.log(this.ldkcList,'4444')
        //         } else {
        //             this.$message.error('请求失败！');
        //         }
        //     })
        // },
        getCourseList() {
            console.log(this.testdata, 'aaaaaaaaaaaasd')
            // 列表传来的值
            this.form.radio=[]
            let aa = []
            this.testdata.forEach((item, i) => {
                aa.push(item.id)
                this.form.radio.push(item.id)
            })
            let params = Object.assign({}, this.ipagination)
            getActionV3(this.url.list, params).then(res => {
                console.log(res.data.records, 'aasaaaaa引用获取的数据')
                if (res.code === 200) {
                    this.cousList = res.data.records;
                    this.ipagination.total = res.data.total
                    let bb = []
                    // 后端获取的值
                    res.data.records.forEach((item, i) => {
                        bb.push(item.id)
                    })
                    // console.log(this.cousList,'this.cousListthis.cousListthis.cousList-----')
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        handleClose() {
            this.$emit('clickClose')
        },
        onSubmit() {
            this.$emit('saveCous', this.checkedItems)
            this.handleClose();
            this.checkedItems=[]
        },
        clk(val,i) {
            console.log(val,parseInt(i.target.value), '复选框')
            if(val){
                this.checkedItems.push(parseInt(i.target.value))
            }else{
                this.checkedItems = this.checkedItems.filter((item) => item !== parseInt(i.target.value));  
                console.log(this.checkedItems, 'xuanzhong')
            }
            this.disabledbtn = true;
        },
        handleCurrentChange(val) {
            this.ipagination.current = val
            this.listLdkc()
        },
    }
};
</script>

<style scoped lang="scss">
.box{
    color: #000000;
}
.upload-icon {
    width: 110px;
    height: 110px;
    background-color: #F0F1F8;
    line-height: 110px;
    color: #626BF1;
    font-size: 30px;
    border-radius: 10px;
}

.avatar {
    width: 110px;
    height: 110px;
}

.w100 {
    width: 100%;
}

.reset-form {
    padding: 0 20px;
}


.user-list {
    height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;

    .checkbox__label {
        width: 80%;
    }

    .list {
        width: 500px;
        height: 86px;
        background: #F8F9FC;
        border: 1px solid #F8F9FC;
        border-radius: 12px;
    }

    .right {
        box-sizing: border-box;
        padding: 10px 0;
        width: 100px;
        height: 86px;

        .title {
            width: 134px;
            height: 20px;
            line-height: 20px;
            background: #F3F4FB;
            border-radius: 9px;
            color: #939FF4;
            font-size: 14px;
        }
    }

    .item {
        display: flex;
        width: 100%;
        margin-right: 30px;

        .img {
            width: 98px;
            height: 74px;
            border-radius: 12px;
        }
    }
}


//单选
.user-list>>>.el-radio {
    width: 600px;
    margin-right: 0;
    display: flex;
    justify-content: center;
}

.user-list>>>.el-radio.is-checked .list {
    border: 1px solid #409eff;
}

.user-list>>>.el-radio__input {
    display: flex;
    align-items: center;
}

.user-list>>>.el-radio__input.is-checked+.el-radio__label {
    color: #000000;
}

.user-list>>>.el-radio__input.is-checked .el-radio__inner {
    border-color: #409eff;
    background: #409eff;
}
</style>
